import React from 'react';
import * as Select from '@radix-ui/react-select';
import styles from './index.module.scss';
import classNames from 'classnames';
import { update } from '@/utils/immutableUtil';

class Comp extends React.Component {
  state = {
    selectedVal: null,
  };
  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);
  render() {
    const { mcpList } = this.props
    const { selectedVal } = this.state;
    
    return (
      <div className={styles.container}>
        <Select.Root value={selectedVal}>
          <Select.Trigger
            className={classNames(styles.trigger, {
              [styles.open]: true,
            })}
            aria-label="Select plugin"
          >
            <div className={styles.triggerContent}>
              <div className={styles.pluginIcon}>
                <i className="iconfont icon-a-AvaliablePlugins"></i>
              </div>
              <div className={styles.title}>Avaliable Plugins</div>
            </div>
          </Select.Trigger>

          <Select.Portal>
            <Select.Content
              className={styles.content}
              position="popper"
              sideOffset={8}
              align="center"
            >
              <Select.Viewport>
                <div className={styles.pluginRow}>
                {mcpList.map((item) => (
                  <Select.Item
                    key={String(item.server_name)}
                    value={String(item.server_name)}
                    className={classNames(styles.item, {
                      [styles.selected]: selectedVal === item.server_name,
                    })}
                  >
                    <div className={styles.pluginName}>{item.server_name}</div>
                  </Select.Item>
                ))}
                </div>
              </Select.Viewport>
            </Select.Content>
          </Select.Portal>
        </Select.Root>
      </div>
    );
  }
}

export default Comp;
